<template>
  <div>

    <img alt="Vue logo" src="../../../assets/logo.png"  style="margin-top: 30px">
    <a-tabs default-active-key="1"  style="margin-top: 20px">
      <a-tab-pane key="1" tab="扫码快速登录">
        <div style="display: block"><img :src="qrsrc" /></div>
        <p  style="margin-top: 10px">{{xiaoxi}}</p>
      </a-tab-pane>
      <a-tab-pane key="2" tab="验证码登录" force-render>
        <a-alert
            message="建议使用手机QQ扫码登录，安全方便快人一步！"
            banner
            closable
        />
        <a-input-number v-model="user_qq"  placeholder="请输入QQ号码" style="width: 400px;margin-top: 30px" />
        <br>
        <a-input-search placeholder="请输入验证码" enter-button="获取验证码" @search="onSearch" style="width: 400px;margin-top: 20px" />
        <br>
        <a-button type="primary" style="width: 400px;margin-top: 20px">登录</a-button>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts">
import { auth1,auth2 } from '../../../api/qqAuth'
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class login extends Vue {

  qrsrc = ''
  qrsig = ''
  xiaoxi = '二维码加载中'
  timer_Id = 0
  user_qq = ''
  user_vref = ''

  //获取二维码
  async getqr(){
    let res = await auth1()
    console.log(res)
    this.qrsrc = 'data:image/png;base64,' + res.data.data
    this.qrsig = res.data.qrsig
    this.xiaoxi = res.msg
  }

  //检查认证情况
  async checkqr(){
    let res = await auth2({qrsig:this.qrsig})
    console.log(res)
    this.xiaoxi = res.data.msg
    if(res.data.code == 1){
      await this.$store.dispatch('login', {token: res.data.data.skey, uin: res.data.data.uin, nick: res.data.data.nick})
    }
  }


  created(){
    if(this.$store.state.is_login){
      this.$router.push('/')
      this.$message.warning('您已经登录，请不要重复登录')
      return
    }
    //初始化二维码事件
    this.getqr()
    this.timer_Id = setInterval(this.checkqr,3000)
  }

  //离开前停止监听
  destroyed(){
    clearInterval(this.timer_Id)
  }
}
</script>

<style scoped>

</style>
